<template>
    <div class="card">
        <br>
        <div style="font-size:1.8rem;font-weight:bold;text-align: center;">{{ $route.params.id }}</div>
        <br>
        <div style="text-align:center;font-size: 1.1rem;">【{{isRushOut}}东门】</div>
        <br>
        <br>
        学号：2021120{{randInt1}}{{randInt2}}
        <br>
        身份：研究生
        <br>
        学院：公共卫生学院
        <br>
        辅导员：王宇晗
        <br>
        <br>
        事由：科室团建活动
        <br>
        允许出校：{{timeOut}}
        <br>
        允许入校：{{timeIn}}
        <br>
    </div>
    <div style="font-size:1.1rem;">
        <br>
        <br>
        <div style="text-align:left;font-size:0.8rem;">【出入校申请记录】
            <br><br>
            绿色：当前有效申请；<br>
            蓝色：就当前时间而言，是提前或延迟出入校<br>
            灰色：过期申请或无效数据
        </div>
        <br>
        <span id="Label_history">
            <div style="text-align:left;font-size:0.8rem;">
                <div class="divgreen">1.学生{{ $route.params.id }}，{{ md5A }}申请于{{timeA}}{{isRushOut}}校。</div>
                <div class="divgray">2.学生{{ $route.params.id }}（辅导员王宇晗），{{ md5B }}申请于2021/9/30 15:00:00出校，已经过期。
            </div>
        </div>
        </span>
    </div>
</template>

<style scoped>
.divgreen {
    color: darkgreen;
    font-size: 0.8rem;
    text-align: left;
}
.divgray {
    color: gray;
    font-size: 0.8rem;
    text-align: left;
}
.card{
    margin: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: darkgreen;
    color: #FFFFFF;
    font-size: 1.2rem;
}
</style>

<script>
import { mapMutations } from "vuex";
import moment from 'moment'
import md5 from 'js-md5';

export default ({
    data(){
        return{
            isRushOut: this.$store.state.isRushOut,
            timeIn: '',
            timeOut: '',
            timeA: '',
            md5A: '',
            md5B: '',
            randInt1: Math.floor(Math.random()*7)+1,
            randInt2: Math.floor(Math.random()*50)+11,
        }
    },
    methods:{
        ...mapMutations(["changeIsRushOut"]),
    },
    created() {
        this.changeIsRushOut(this.isRushOut)
        if (this.isRushOut=='出'){
            this.timeOut= moment(Date()).add(-Math.ceil(Math.random()*20)-20, 'minutes').format("YYYY/MM/DD HH:mm:00").replace(/\/0/, '/')
            this.timeIn= moment(Date()).add(+Math.ceil(Math.random()*60)+120, 'minutes').format("YYYY/MM/DD HH:mm:00").replace(/\/0/, '/')
            this.timeA= this.timeOut
        } else {
            this.timeOut= moment(Date()).add(-Math.ceil(Math.random()*60)-120, 'minutes').format("YYYY/MM/DD HH:mm:00").replace(/\/0/, '/')
            this.timeIn= moment(Date()).add(Math.ceil(Math.random()*20)+20, 'minutes').format("YYYY/MM/DD HH:mm:00").replace(/\/0/, '/')
            this.timeA= this.timeIn
        }
        this.md5A= md5(Math.random().toString()).substring(0,6)
        this.md5B= md5(Math.random().toString()).substring(0,6)
    },
})
</script>
